import React, {Component} from 'react'
import {
  View,
  Text,
  StyleSheet,
  Platform,
  TouchableOpacity,
  Alert,
  ActivityIndicator,
  Dimensions,
  Image
} from 'react-native'


import ICON from 'react-native-vector-icons/Ionicons'
import ICON2 from 'react-native-vector-icons/FontAwesome'
import font from "../../styles/font";
import {Actions} from "react-native-router-flux";
import { SafeAreaView } from 'react-navigation';
import { Input, Toast, Button  } from 'teaset'
import CountDown from 'react-native-countdown-component';

const {
  height: deviceHeight,
  width: deviceWidth
} = Dimensions.get("window");

class SmsScene extends Component{
  constructor(props){
    super(props)
    this.state = {
      phone: '',
      buttonStatus:true
    }
  }

  componentDidMount() {
    if(this.props.loginType === 'bind'){
      Toast.success('授权成功，请您绑定手机！');
    }
    // Actions.smsCode({sendCodeMsg: '发送成功,请注意查收', phone: 13925440084,w_user: this.props.w_user, loginType: this.props.loginType});
  }


  componentWillReceiveProps(nextProps) {
    const { sendCode } = nextProps


    if(nextProps.refresh){
      Actions.refresh({
        refresh: false
      });
      Actions.pop({refresh:{refresh:true}, timeout:1})
    }

    if(sendCode !== this.props.sendCode){

      if (sendCode.error !== false) {
        Toast.fail(sendCode.error.message)
      }else{
        if (sendCode.isLoading) {
          // TO-DO
        }else {
          if(sendCode.data.status === 1){
            this.setState({buttonStatus:true})
            Actions.smsCode({
              sendCodeMsg: sendCode.data.msg,
              phone: this.state.phone,
              loginType: this.props.loginType,
              w_user: this.props.loginType === 'bind' ? this.props.w_user : ''
            });
          }else{
            if(sendCode && sendCode.data){
              Toast.fail(sendCode.data.msg)
            }
          }
        }
      }
    }
  }


  _changeText(text){
    this.setState({phone: text})
    if(text.length === 11){
      this.setState({buttonStatus: false})
    }else{
      this.setState({buttonStatus: true})
    }

  }


  _submit(){
    this.props.actions.sendCode({phone:this.state.phone, login_type: this.props.loginType})
  }


  renderCountdown(){
    if(this.state.buttonStatus && this.state.phone.length === 11){
      return(
        <View style={{flexDirection:'row', justifyContent:'center', alignItems:'center', flex:1}}>
          <CountDown
            until={60}
            onFinish={() => {this.setState({buttonStatus:false})}}
            timeToShow={['S']}
            size={18}
            labelS={''}
            digitBgColor={'#ff330a'}
            digitTxtColor={'#fff'}
            style={{marginTop: 18}}
            />
          <Text style={{fontSize:18, color:'#fff'}}>秒后重新获取</Text>
        </View>
      )
    }else{
      return(
        <Text style={{fontSize:18, color:'#fff'}}>下一步</Text>
      )
    }
  }


  render(){
    return(
      <SafeAreaView style={styles.container}>
        <View style={styles.title}>
          <View style={{width:20}}></View>
          <Text style={[font.black18]}>{this.props.loginType === 'bind' ? '绑 定 ' : null}手 机 号</Text>
          <ICON color='#000' size={26} name="md-close" onPress={()=>{Actions.pop()}}/>
        </View>
        <View style={styles.content}>
          <View style={{position:'absolute', width:deviceWidth, height:50, top:200, zIndex: this.props.sendCode.isLoading ? 99 : 0}}>
            <ActivityIndicator
              animating={this.props.sendCode.isLoading}
              size='large'
            />
          </View>
          <View style={styles.smsContainer}>
            <ICON2 name="mobile-phone" color="#606060" size={30} />
            <Input style={{width: 200, backgroundColor:'#f7f7f7', borderColor: '#f7f7f7', letterSpacing:3}}
                   size='lg'
                   value={this.state.phone}
                   onChangeText={(text)=>{this._changeText(text)}}
                   keyboardType='numeric'
                   maxLength={11}
                   autoFocus={true}
            />
          </View>
          <Button type='primary' size='xl'
                  style={{height:40, backgroundColor:'#ff330a', borderWidth: 0}}
                  disabled={this.state.buttonStatus}
                  onPress={()=>{this._submit()}}
          >
            {this.renderCountdown()}
          </Button>
        </View>

      </SafeAreaView>
    )
  }
}

const styles = {
  container:{
    backgroundColor: '#fff',
    flex: 1,
  },
  title:{
    borderBottomColor:'#f6f6f6',
    borderBottomWidth:1,
    height:40,
    justifyContent:'space-between',
    alignItems:'center',
    paddingHorizontal:10,
    flexDirection:'row'
  },
  content:{
    flex:1,
    paddingTop:50,
    paddingHorizontal:20,
    flexDirection:'column'
  },
  smsContainer:{
    height:50,
    backgroundColor: '#f7f7f7',
    alignItems:'center',
    paddingHorizontal:15,
    borderRadius:30,
    borderColor:'#b1b1b1',
    borderWidth: 1,
    flexDirection:'row',
    marginBottom: 20,
  }
}


export const LayoutComponent = SmsScene

export function mapStateToProps(state, props) {
  return {
    routes: state.routes,
    sendCode: state.sendCodeReducer
  }
}